<template>
  <div class="headerbox">
    <div class="header">
        <div class="headerL">
            <a onclick="javascript:history.back(-1)" class="goback"><img src="/assets/images/goback.png" /></a>
        </div>
        <div class="headerC">
            <p>优惠券列表</p>
        </div>
    </div>
</div>
<div class="clear"></div>
<div class="h50"></div>
<div class="coupon_list">
    <div class="coupon_item" v-for="(item, index) in couponlist" :key="index">
        <div class="item_content">
            <a href="coupon-info.html">
                <div class="left">
                    {{item.coupon.rate*10}}<span>折</span>
                </div>
                <div class="right">
                    <div>{{item.coupon.title}}</div>
                    <div>活动开始时间:{{item.coupon.createtime_text}}</div>
                    <div>活动结束时间:{{item.coupon.endtime_text}}</div>
                    <div>领取数量：{{item.coupon.total}}张，每人限领1张</div>
                </div>
            </a>
        </div>
        <div class="item_btn">
            <van-button type="warning" v-show="item.status=='1'" @click="info(item.coupon.id)">查看详情</van-button>
            <button class="apply_btn" readonly v-show="item.status=='0'">已使用或过期</button>
        </div>
    </div>
</div>
<Footer />
</template>

<script setup>
import Footer from '@/components/common/footer.vue'

const { proxy } = getCurrentInstance()
const LoginUser = reactive(proxy.$cookies.get("LoginUser"))
const couponlist=ref([])

// 挂载前加载出数据
onBeforeMount(()=>{
  getCouponData()
})
const getCouponData = async ()=>{
  let result=await Api.mycoupon({busid:LoginUser.id})
  if (result.code == 1) {
    couponlist.value=result.data;
  }
}

// 优惠券详情
const info = async (id)=>{
  proxy.$router.push({
    path:'/home/coupon/info',
    query:{
      cid:id
    }
  })
}
</script>

<style scoped>
@import url('/assets/css/coupon.css');
</style>